<template>
    <v-lazy transition="scale-transition">
        <div>
            <v-hover v-slot:default="{ hover }">
                <v-card :elevation="hover ? 4 : 0" class="mx-auto" width="">
                    <v-img
                        :alt="image.text"
                        class="white--text align-end"
                        lazySrc="/images/sunshine_GaussianBlur.jpg"
                        v-bind:src="imageUrl + image.thumbnailpath"
                        @mouseleave="overlay = false"
                        @mouseover="overlay = true"
                    >
                        <v-fade-transition>
                            <v-overlay
                                v-if="overlay"
                                absolute
                                color="#333"
                                opacity="0.7"
                            >
                                <v-btn outlined @click="changeShow">
                                    See more info
                                </v-btn>

                                <!--                                <v-btn outlined :href="baseUrl + image.path" color="white" target="_blank">-->
                                <!--                                    查看原图,右键保存-->
                                <!--                                </v-btn>-->
                            </v-overlay>
                        </v-fade-transition>
                    </v-img>
                    <v-card-text>
                        <div align="left">#{{ image.date }}</div>
                        <p align="left" class="display-1 text--primary"></p>
                        <a
                            :href="bingUrl + image.copyrightlink"
                            target="_blank"
                        >
                            <p align="left">
                                {{ image.text }}
                            </p>
                        </a>
                        <div align="left" class="text--primary">
                            {{ image.copyright }}
                        </div>
                    </v-card-text>
                </v-card>
            </v-hover>
        </div>
    </v-lazy>
</template>

<script>
export default {
    name: "TCard",
    // "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
    data: function () {
        return {
            baseUrl: this.$global.serverUrl,
            bingUrl: this.$global.bingUrl,
            imageUrl: this.$global.imageUrl,
            overlay: false,
            show: false
        };
    },
    props: {
        image: {
            type: Object
        }
    },
    watch: {
        // show(val) {
        //     console.log(this.show);
        //     val &&
        //         setTimeout(() => {
        //             this.show = false;
        //         }, 5000);
        // }
    },
    methods: {
        changeShow() {
            this.$store.commit("originalShow");
            // console.log(this.image.title + 'aaa')
            this.$store.commit("updateImageViewer", this.image);
        }
    }
};
</script>

<style scoped>
.v-card__text,
.v-card__title {
    padding: 16px 0 0 0;
}

.v-card__subtitle {
    padding: 0;
}

a {
    text-decoration: none;
    color: black !important;
}

.v-sheet.v-card {
    border-radius: 1px !important;
    padding: 5%;
}

/* v-card-title 水平居中 */
/* .v-card__title {
    justify-content: center;
} */
</style>
